import React, { useEffect, useRef } from 'react';
import { List, Spin } from 'antd';
import ChatMessageItem from '../ChatMessageItem';
import {Agent} from "@/components/AgentList";

// Message type definition
export interface Message {
  agentId: string;
  messageId?: number;
  content?: string;
  parent?: Message;
  status: 'init' | 'processing' | 'complete';
  role: 'user' | 'assistant';
  contentType: 'text' | 'image' | 'markdown';
  timestamp?: Date;
  children?: Message[];
}

interface MessageListProps {
  messages: Message[];
  loading?: boolean;
  onUpdateMessage?: (messageId:string, agentId:string, content:string, status:string) => void;
  agent: Agent;
}

const ChatMessageList: React.FC<MessageListProps> = ({
  messages,
  loading,
  onUpdateMessage,
  agent,
  sessionId
}) => {
  const listRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (listRef.current) {
      listRef.current.scrollTop = listRef.current.scrollHeight;
    }
    console.log('messages changed in ChatMessageListPage', messages);
  }, [messages]);

  return (
    <div style={{ margin: '0 auto', height: '100%', overflowY: 'auto' }} ref={listRef}>
      <List
        itemLayout="horizontal"
        dataSource={messages}
        loading={loading}
        renderItem={(sameParentUserMessage) => {
          const message = sameParentUserMessage.messages[0];
          const children = message.children;
          const child = children ? children[0] : null;
          return (
            <>
              {message ? (
                <List.Item
                  style={{
                    justifyContent: message.role === 'user' ? 'flex-end' : 'flex-start',
                    padding: '8px 0',
                  }}
                >
                  <ChatMessageItem
                    agent={agent}
                    sessionId={sessionId}
                    message={message}
                    parent={message.parent}
                    onMessageChange={() => {
                      if (listRef.current) {
                        listRef.current.scrollTop = listRef.current.scrollHeight;
                      }
                    }}
                    onUpdate={onUpdateMessage}
                  />
                </List.Item>
              ) : (
                <></>
              )}
              {child ? (
                <List.Item
                  style={{
                    justifyContent: child.role === 'user' ? 'flex-end' : 'flex-start',
                    padding: '8px 0',
                  }}
                >
                  <ChatMessageItem
                    agent={agent}
                    sessionId={sessionId}
                    message={child}
                    parent={child.parent}
                    onMessageChange={() => {
                      if (listRef.current) {
                        listRef.current.scrollTop = listRef.current.scrollHeight;
                      }
                    }}
                    onUpdate={onUpdateMessage}
                  />
                </List.Item>
              ) : (
                <></>
              )}
            </>
          );
        }}
      />

      {loading && (
        <div style={{ textAlign: 'center', padding: 16 }}>
          <Spin tip="AI 正在思考中..." />
        </div>
      )}
    </div>
  );
};

export default ChatMessageList;
